<template>
  <div class="shoeIndex">
    		<!----container---->
		<div class="container">
			<!----top-header---->  
			<div class="top-header">
				<div class="logo">
					<img src="../../images/logo.png" title="barndlogo" />
				</div>
				<div class="top-header-info">
					<div class="cart-details">
						<div class="login-rigister">
							<ul class="unstyled-list list-inline">
								<li><a class="login" href="#" @click="login">登录</a></li>
								<li><button style="background: #F03627; color: #FFF; padding: 0.5em 2.5em; border-radius: 0.3em; font-weight: 600;"><router-link to="/Goods">购物车</router-link></button></li>
								<!-- <li><a class="rigister" href="#">购物车 <span></span></a></li> -->
								<div class="clearfix"> </div>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<!--导航菜单-->
			<div class="top-header-nav"> 
			 <nav class="top-nav main-menu">
					<ul class="top-nav">
						<li><a href="#" >首页</a><span> </span></li>
						<li><a href="#" @click="sendSingle">产品</a><span> </span></li>
						<li><a href="#">服务</a><span> </span></li>
						<li><a href="#">品牌</a><span> </span></li>
						<li><a href="#">关于我们</a></li>
						<div class="clearfix"> </div>
					</ul>
					<a href="#" id="pull"><img src="../../images/nav-icon.png" title="menu" /></a>
			  </nav>
			  <!--搜索-->
			  <div class="top-header-search-box">
			  	<form>
					  <!-- required要求不能为空 maxlength限制输入长度 -->
			  		<input @keyup.enter="single" type="text" placeholder="Search" required  maxlength="22">
			  		<input type="submit" value=" " >
			  	</form>
			  </div>
				<div class="clearfix"> </div>
			</div>
		</div>
			<!--筛选-->
				<div class="content">
					<div class="container">
				<!-- 筛选 -->
				<div class="products">
					<div class="product-filter">
						<h1><a href="#">筛选</a></h1>
						<div class="product-filter-grids"> 
							<div class="col-md-3 product-filter-grid1-brands">
								<h3>品牌</h3>
								<ul class="col-md-6 unstyled-list b-list1">
									<li><a href="#">阿迪达斯</a></li>
									<li><a href="#">耐克</a></li>
									<li><a href="#">露营车</a></li>
									<li><a href="#">超级</a></li>
									<li><a href="#">林地</a></li>
									<li><a href="#">新平衡</a></li>
									<li><a href="#">交谈</a></li>
									<li><a href="#">彪马</a></li>
									<li><a href="#">基尼提克斯</a></li>
									<div class="clearfix"> </div>
								</ul>
								<ul class="col-md-6 unstyled-list b-list2">
									<li><a href="#">老虎</a></li>
									<li><a href="#">拉科斯特</a></li>
									<li><a href="#">伊布克</a></li>
									<li><a href="#">猫</a></li>
									<li><a href="#">码头工人</a></li>
									<div class="clearfix"> </div>
								</ul>
								<div class="clearfix"> </div>
							</div>
							<!--男生-女生-儿童-->
							<div class="col-md-6 product-filter-grid1-brands-col2">
									<div class="producst-cate-grids">
										<div class="col-md-4 producst-cate-grid text-center">
											<h2>女生</h2>
											<img class="r-img text-center img-responsive" src="../../images/img-w.jpg" title="name">
											<span><img src="../../images/objs1.png" title="name"></span>
											<h4>总共</h4>
											<label>357 产品</label>
											<a class="r-list-w" href="#"><img src="../../images/list-icon.png" title="list"></a>
										</div>
										<div class="col-md-4 producst-cate-grid text-center">
											<h2>男士</h2>
											<img class="r-img text-center img-responsive" src="../../images/man-r-img.jpg" title="name">
											<span><img src="../../images/objs2.png" title="name"></span>
											<h4>总共</h4>
											<label>357 产品</label>
											<a class="r-list-w" href="#"><img src="../../images/list-icon.png" title="list"></a>
										</div>
										<div class="col-md-4 producst-cate-grid text-center">
											<h2>儿童</h2>
											<img class="r-img text-center img-responsive" src="../../images/kid-r-img.jpg" title="name">
											<span><img src="../../images/objs3.png" title="name"></span>
											<h4>总共</h4>
											<label>357 产品</label>
											<a class="r-list-w" href="#"><img src="../../images/list-icon.png" title="list"></a>
										</div>
									</div>
							</div>
							<!--选择 颜色-->
							<div class="product-filter-grid1-brands-col3">
								<div class="products-colors">
									<h3>选择 颜色 </h3>
									<li><a href="#"><span class="color1"> </span></a></li>
									<li><a href="#"><span class="color2"> </span></a></li>
									<li><a href="#"><span class="color3"> </span></a></li>
									<li><a href="#"><span class="color4"> </span></a></li>
									<li><a href="#"><span class="color5"> </span></a></li>
									<li><a href="#"><span class="color6"> </span></a></li>
									<li><a href="#"><span class="color7"> </span></a></li>
									<li><a href="#"><span class="color8"> </span></a></li>
									<li><a href="#"><span class="color9"> </span></a></li>
									<li><a href="#"><span class="color10"> </span></a></li>
									<li><a href="#"><span class="color11"> </span></a></li>
									<li><a href="#"><span class="color12"> </span></a></li>
									<li><a href="#"><span class="color13"> </span></a></li>
									<li><a href="#"><span class="color14"> </span></a></li>
									<li><a href="#"><span class="color15"> </span></a></li>
									<li><a href="#"><span class="color16"> </span></a></li>
									<li><a href="#"><span class="color17"> </span></a></li>
									<li><a href="#"><span class="color18"> </span></a></li>
									<li><a href="#"><span class="color19"> </span></a></li>
									<li><a href="#"><span class="color20"> </span></a></li>
									<div class="clearfix"> </div>
								</div>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
				<!-- //筛选 ---->
				<!-- 特殊产品头部 -->
				<div class="special-products all-poroducts">
					<div class="s-products-head">
						<div class="s-products-head-left">
							<h3>特殊 <span>产品</span></h3>
						</div>
						<div class="s-products-head-right">
							<a href="#"><span> </span>查看所有产品</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<!----特殊产品---->
					<div class="special-products-grids">
						<div class="col-md-3 special-products-grid text-center" v-for="item in list" :key="item.id">
							<a class="brand-name" href="#"><img :src="item.goods_img1" title="name" /></a>
							<a class="product-here" href="#"><img :src="item.goods_img2" title="product-name" /></a>
							<h4><a href="#">{{item.goods_name}}</a></h4>
							<a @click.prevent="single(item.id)" class="product-btn" href="#"><span>{{item.goods_price}}$</span>立即获取<label></label></a>
							<!-- <a @click.prevent="single(item.id)" class="product-btn" href="#"><span>{{item.goods_price}}$</span>立即获取<label></label></a> -->
						</div>
						<div class="clearfix"> </div>
					</div>
					<!---//特殊产品s---->
				</div>
				<!--最新产品_头部-->
				<div class="special-products all-poroducts latest-products">
					<div class="s-products-head">
						<div class="s-products-head-left">
							<h3>最新 <span>产品</span></h3>
						</div>
						<div class="s-products-head-right">
							<a href="#"><span> </span>查看所有产品</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<!--最新产品-->
					<div class="special-products-grids">
						<div class="col-md-3 special-products-grid text-center" v-for="item in list" :key="item.id">
							<a class="brand-name" href="#"><img :src="item.goods_img1" title="name" /></a>
							<a class="product-here" href="#"><img :src="item.goods_img2" title="product-name" /></a>
							<h4><a href="#">{{item.goods_name}}</a></h4>
							<a @click.prevent="single(item.id)" class="product-btn" href="#"><span>{{item.goods_price}}$</span><small>立即获取</small><label> </label></a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<!---//最新产品---->
				</div>
				<!--最新产品-->
				</div>
		</div>
		<!----container---->
  </div>
</template>

<script>
import Goods from '@/components/Goods/Goods.vue'
import Single from '@/components/Single/Single.vue'
import bus from '@/components/eventBus.js'
export default {
	data() {
    return {
      // 用来存储购物车的列表数据，默认为空数组
      list: [
        {goods_count: 1, goods_img1: require("../../images/b1.jpg"), goods_img2: require("../../images/p1.jpg"), goods_name: '耐克玫瑰鞋', goods_price: 199, goods_state: false, id: 11},
        {goods_count: 1, goods_img1: require("../../images/b2.jpg"), goods_img2: require("../../images/p2.jpg"), goods_name: '线路链接67009', goods_price: 199, goods_state: false, id: 12},
        {goods_count: 1, goods_img1: require("../../images/b3.jpg"), goods_img2: require("../../images/p3.jpg"), goods_name: '极小值零', goods_price: 199, goods_state: false, id: 13},
        {goods_count: 1, goods_img1: require("../../images/b4.jpg"), goods_img2: require("../../images/p4.jpg"), goods_name: '运动鞋', goods_price: 199, goods_state: false, id: 14},
        {goods_count: 1, goods_img1: require("../../images/b5.jpg"), goods_img2: require("../../images/p2.jpg"), goods_name: '维罗尼克', goods_price: 199, goods_state: false, id: 15},
        {goods_count: 1, goods_img1: require("../../images/b6.jpg"), goods_img2: require("../../images/p6.jpg"), goods_name: '绒面鞋靴子', goods_price: 199, goods_state: false, id: 16},
        {goods_count: 1, goods_img1: require("../../images/b7.jpg"), goods_img2: require("../../images/p7.jpg"), goods_name: '路障 6.0', goods_price: 199, goods_state: false, id: 17},
        {goods_count: 1, goods_img1: require("../../images/b1.jpg"), goods_img2: require("../../images/p8.jpg"), goods_name: '科图经典', goods_price: 199, goods_state: false, id: 18},
		]
		}
	},
	methods:{
		// 跳转到single
		sendSingle(){
			this.$router.push('/single')
		},
		// 跳转到登陆页面
		login(){
			this.$router.push('/login')
		},
		//切换到购物车
		// cart(){
		// 	this.$emit('cart', "Goods")
		// },
		single(e){
        	bus.$emit('sedSingle',this.list[e-11])
			this.$router.push('/single')
			// console.log(this.list[e-10]);
      }
	},
	components: {
    	Goods,Single
  }
  }
</script>

<style scoped>
@import "../../css/style.css";   
@import "../../css/bootstrap.css";   

</style>